<template>
	<view class="u-page fullpage">
		<view class="top-warp">
			<zx-nav title="账单明细"></zx-nav>
			<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
		</view>
		<mescroll-body :top="topH" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view v-for="(item, index) in scoreList" :key="index" class="account-item">
				<view class="flex justify-between">
					<div>{{ item.info }}</div>
					<view class="price">{{ item.type == 1 ? '+' : '-' }}{{ item.money }}</view>
				</view>
				<view class="mt16">{{ item.created_at }}</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations } from 'vuex';
import AppTabs from '@/components/app-tabs.vue';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			scoreList: [],
			tabIndex: 0,
			tabs: ['全部', '收入', '支出']
		};
	},
	components: { AppTabs },
	computed: {
		...mapState(['CustomBar']),
		topH() {
			return this.CustomBar + uni.upx2px(100) + uni.upx2px(20) + 'px';
		}
	},
	methods: {
		downCallback(){
			this.mescroll.resetUpScroll();
		},
		upCallback(mescroll) {
			this.getscore();
		},
		//获取余额明细列表
		getscore() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize
			};
			if (this.tabIndex > 0) {
				param.type = this.tabIndex;
			}
			let $me = this;
			this.$postAction(this.$api.getBillList, param).then(da => {
				if ($me.mescroll.num == 1) $me.scoreList = []; //如果是第一页需手动制空列表
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					$me.mescroll.endBySize(curPageData.length, da.count);
					$me.scoreList = $me.scoreList.concat(curPageData); //追加新数据
				} else {
					$me.mescroll.endSuccess(0, false);
				}
			});
		},
		tabChange(e) {
			this.mescroll.resetUpScroll();
		},
	}
};
</script>
<style>
page {
	background: #fff;
}
</style>
<style lang="scss">
.account-item {
	color: #1c1c1e;
	padding: 24upx 28upx;
	color: #969696;
	border-bottom: 1px solid #f0f0f0;
	font-size: 24upx;
	& > view:first-child {
		font-size: 28upx;
		color: #1c1c1e;
	}
}
.top-warp {
	z-index: 9990;
	position: fixed;
	top: --window-top;
	/* css变量 */
	left: 0;
	width: 100%;
	background-color: white;
	border-bottom: 1px solid #f0f0f0;
}
</style>
